<template>
	<view>
		<view class="container">
			<!-- 顶部选项卡 -->
			<view v-if="tabList.length > 1 " class="swiper-tab dis-flex box-align-center flex-y-center">
				<block v-for="(item,index) in tabList " :key="index">
					<view class="swiper-tab-item flex-box" :class="[dataType == item.value ? 'on' : '']" :data-current=" item.value "
					 @tap="swichNav">{{ item.text }}({{ item.total }})</view>
				</block>
			</view>
			<!-- 团队总人数 -->
			<view class="widget-people f-28 col-9">{{ words.team.words.total_team.value }}：{{ team_total }}人</view>
			<!-- 我的团队列表 -->
			<scroll-view scroll-y=" true " @scrolltolower="triggerDownLoad" :style="[{height: Height}]">
				<view class="widget-list b-f" v-if="list.data && list.data.length ">
					<view class="widget__detail dis-flex flex-x-between" v-for="(item,index) in list.data " :key="index">
						<view class="detail__left dis-flex flex-y-center">
							<view class="user-avatar">
								<image :src=" item.user.avatarUrl "></image>
							</view>
							<view class="user-info dis-flex flex-dir-column flex-x-center">
								<view class="user-nickName f-28">{{ item.user.nickName }}</view>
								<view class="user-time col-9 f-24">{{ item.create_time }}</view>
							</view>
						</view>
						<view class="detail__right dis-flex flex-dir-column flex-x-center flex-y-center">
							<view class="detail__money">
								<text class="f-24">￥</text>
								<text class="f-34">{{ item.user.money }}</text>
							</view>
							<view class="detail__member f-22" v-if=" item.dealer ">
								{{ item.dealer.first_num + item.dealer.second_num + item.dealer.third_num }}个成员
							</view>
						</view>
					</view>
					<!-- 没有更多 -->
					<view v-if="list.data && list.data.length && !isLoading && no_more " class="no-more f-30">亲, 没有更多了</view>
				</view>
				<!-- 没有记录 -->
				<view class="yoshop-notcont" v-if="list.data && !list.data.length && !isLoading ">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">亲，暂无团队记录哦</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			Height() {
				return uni.upx2px(this.swiperHeight*2) + 'px';
			}
		},
		data() {
			return {
				isLoading: true,
				dataType: 1,
				page: 1,
				no_more: false,
				swiperHeight:'',
				tabList:{},
				words:{
					team:{
						words:{
							total_team:{
								value:''
							}
						}
					}
				},
				team_total:'',
				dealer:{},
				list:{},
				setting:{},
			}
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// 获取我的团队列表
			this.getTeamList();
		},
		methods: {
			/**
			 * 获取我的团队列表
			 */
			getTeamList: function(isNextPage, page) {
				let _this = this;
				_this._get('user.dealer.team/lists', {
					level: _this.dataType,
					page: page || 1,
				}, function(result) {
					// console.log(_this.createData(result.data, isNextPage));
					// 创建页面数据
					_this.setData(_this.createData(result.data, isNextPage));
				});
			},

			/**
			 * 创建页面数据
			 */
			createData: function(data, isNextPage) {
				data['isLoading'] = false;
				// 列表数据
				let dataList = this.list;
				if (isNextPage == true && (typeof dataList !== 'undefined')) {
					data.list.data = dataList.data.concat(data.list.data)
				}
				// 设置当前页面标题
				uni.setNavigationBarTitle({
					title: data.words.team.title.value
				});
				// 团队总人数
				data['team_total'] = data.dealer.first_num;
				// 导航栏数据
				data['tabList'] = [{
					value: 1,
					text: data.words.team.words.first.value,
					total: data.dealer.first_num
				}];
				if (data.setting.level >= 2) {
					data['tabList'].push({
						value: 2,
						text: data.words.team.words.second.value,
						total: data.dealer.second_num
					});
					data['team_total'] += data.dealer.second_num;
				}
				if (data.setting.level == 3) {
					data['tabList'].push({
						value: 3,
						text: data.words.team.words.third.value,
						total: data.dealer.third_num
					});
					data['team_total'] += data.dealer.third_num;
				}
				// 设置swiper的高度
				this.setSwiperHeight(data.setting.level > 1);
				return data;
			},

			/**
			 * 下拉到底加载数据
			 */
			triggerDownLoad: function() {
				// console.log(this.list);
				// 已经是最后一页
				if (this.page >= this.list.last_page) {
					this.setData({
						no_more: true
					});
					return false;
				}
				this.getTeamList(true, ++this.page);
			},

			/**
			 * 设置swiper的高度
			 */
			setSwiperHeight: function(isTap) {
				// 获取系统信息(拿到屏幕宽度)
				let systemInfo = uni.getSystemInfoSync(),
					rpx = systemInfo.windowWidth / 750, // 计算rpx
					tapHeight = isTap ? Math.floor(rpx * 82) : 0, // tap高度
					peopleHeight = Math.floor(rpx * 65), // people高度
					swiperHeight = systemInfo.windowHeight - tapHeight - peopleHeight; // swiper高度
				this.setData({
					swiperHeight
				});
			},

			/** 
			 * 点击tab切换 
			 */
			swichNav: function(e) {
				let _this = this;
				_this.setData({
					dataType: e.target.dataset.current,
					list: {},
					page: 1,
					no_more: false,
					isLoading: true,
				});
				// 获取我的团队列表
				_this.getTeamList();
			},
		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	/* 选项卡 */

	.swiper-tab {
		width: 100%;
		text-align: center;
		height: 80rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.swiper-tab .swiper-tab-item {
		/* width: 33.333333%; */
		height: 100%;
		font-size: 28rpx;
		color: #777;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		border-bottom: 2px solid #ffffff00;
	}

	.swiper-tab .on {
		color: #786cff;
		border-bottom: 2px solid #786cff;
	}

	/* 设置scroll-view容器高度 */

	.widget-list,
	.yoshop-notcont {
		height: 100.1%;
	}

	/* 团队人数 */

	.widget-people {
		padding: 15rpx 25rpx;
		height: 65rpx;
		box-sizing: border-box;
		background: #f7f7f7;
	}

	/* 提现明细列表 */

	.widget-list {
		padding: 10rpx 20rpx 40rpx 20rpx;
		box-sizing: border-box;
	}

	.widget__detail {
		padding: 20rpx 15rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		border-bottom: 1rpx solid #e7e7e7;
	}

	.widget__detail .user-avatar {
		margin-right: 16rpx;
	}

	.widget__detail .user-avatar image {
		display: block;
		width: 100rpx;
		height: 100rpx;
		border: 4rpx solid #fff;
		border-radius: 50%;
	}

	.widget__detail .user-info {
		height: 100%;
	}

	.widget__detail .user-nickName {
		margin-bottom: 8rpx;
	}

	.widget__detail .detail__member {
		background-color: #786cff;
		color: #fff;
		padding: 2rpx 15rpx;
		border-radius: 6rpx;
		margin-top: 10rpx;
	}
</style>
